import React,{FC,useEffect} from "react";
import { stateType,connect,ConnectProps,Loading } from "umi";
import {Spin} from "antd"
//ConnectProps Api可以快速拿到想要的dispath,match,location等
interface pagesProps extends ConnectProps{
    data:stateType,
    loading:any
}
const Product:FC<pagesProps>=function({data,loading,dispatch}){
  
    
    useEffect(()=>{
        dispatch! ({type:"product/getProductList"})
    },[])
   let html;
   if(data.err){
    html=<h1>{data.err}</h1>
   }else{
    html=(
        <fieldset>
            <legend>商品</legend>
            <h1>商品列表</h1>
            <ul>
                {
                    (data.productList as []).map((item:any)=>{
                        return(
                            <li key={item.id}>{item.title}</li>
                        )
                    })
                }
            </ul>
        </fieldset>
    )
   }
    return(
        <Spin size="large" spinning={loading}>
            { html}
        
        </Spin>
       
    )
}
export default connect(({product,loading}:{product:stateType,loading:any})=>({data:product,loading:loading.models.product}))(Product)